<script setup >
import SvgIcon from "~/components/common/SvgIcon.vue";

defineProps({
  title: {
    type: String,
    default: ''
  },
  showSuffixIcon: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
<div class="common-title flex justify-between items-center  overflow-hidden">
  <div class="left flex flex-1 overflow-hidden items-center min-w-200px">
    <div class="prefix-icon">
      <slot name="prefix-icon">
        <span class="line"></span>
      </slot>
    </div>
    <div :title="title" class="title-text ml-20px text-#000 flex-1 text-18px  ellipsis">
      <slot name="title">{{title}}</slot>
    </div>
  </div>
  <div class="right-util flex">
    <slot name="right-util" ></slot>
    <div class="suffix-icon" v-if="showSuffixIcon"></div>
  </div>
</div>
</template>

<style scoped lang="scss">
.line {
  display: inline-block;
  width: 5px;
  height: 20px;
  margin-top: 5px;
  background: linear-gradient( 180deg, #7F0102 0%, rgba(255,255,255,0) 100%);
  border-radius: 24px 24px 24px 24px;
}
.title-text {
  font-weight: 500;
  font-family: PingFang SC;
}

</style>